<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<style type="text/css">
	.star-ani{
		-webkit-animation-name:starani;
    animation-name:starani;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
  }
  .unstar-ani{
    -webkit-animation-name:unstarani;
    animation-name:unstarani;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
  }
  .miniicon-star{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(1);
    display: block;
    color: yellow;
    z-index: -555;
    opacity: 0;

  }
  .icon-ani1{
    -webkit-animation-name:iconani1;
    animation-name:iconani1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
  }
  .icon-ani2{
    -webkit-animation-name:iconani2;
    animation-name:iconani2;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
  }
  .icon-ani3{
    -webkit-animation-name:iconani3;
    animation-name:iconani3;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
  }
  @-webkit-keyframes starani{
    0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,68);}
    60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,255,20);}
    90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
    100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,0);}

  }
  @keyframes starani{
    0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,68);}
    60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,255,20);}
    90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
    100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,255,0);}

  }
  @-webkit-keyframes unstarani{
    0% {-webkit-transform: scale(0.8);transform: scale(0.8);}
    60%{-webkit-transform: scale(1.1);transform: scale(1.1);}
    100%{-webkit-transform: scale(1);transform: scale(1);}

  }
  @keyframes unstarani{
    0% {-webkit-transform: scale(0.8);transform: scale(1);}
    40%{-webkit-transform: scale(1.1);transform: scale(1.1);}
    100%{-webkit-transform: scale(1);transform: scale(1);}

  }
  @-webkit-keyframes iconani1{
    0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
    100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
  }
  @keyframes iconani1{
    0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
    100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
  }
  @-webkit-keyframes iconani2{
    0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
    100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
  }
  @keyframes iconani2{
    0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
    100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
  }
  @-webkit-keyframes iconani3{
    0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
    100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
  }
  @keyframes iconani3{
    0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
    100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
  }
</style>



<div class="star " style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
  <!-- 组件文档 "https://www.layui.com/doc/element/icon.html" -->
  <i class="staricon layui-icon layui-icon-star" data-anistar='star-ani' data-aniunstar='unstar-ani' data-iconfill='layui-icon-star-fill' style="font-size: 100px;color: yellow;cursor: pointer;display: block;"></i> 
  <i class="miniicon-star layui-icon layui-icon-star-fill" data-ani='icon-ani1'></i> 
  <i class="miniicon-star layui-icon layui-icon-star-fill" data-ani='icon-ani2'></i> 
  <i class="miniicon-star layui-icon layui-icon-star-fill" data-ani='icon-ani3'></i> 
</div>

<script type="text/javascript">
  var miniiconstar=$('.miniicon-star');
  $('.staricon').on('click',function(){
   var likethis=$(this),
   iconfill=likethis.data('iconfill'),
   anistar=likethis.data('anistar'),
   aniunstar=likethis.data('aniunstar');
   likethis.removeClass('layui-icon-star');
   if (likethis.hasClass(iconfill)) {
    likethis.removeClass(iconfill)
    .addClass('layui-icon-star')
    .removeClass(anistar)
    .addClass(aniunstar);
    miniiconstar.each(function(){
     $(this).removeClass($(this).data('ani'));
   });	 
  }else{
    likethis.removeClass(aniunstar).addClass(iconfill).addClass(anistar);
    miniiconstar.each(function(){
     $(this).addClass($(this).data('ani'));
   });
  }

});
</script>